<template>
  <view class="contain">
    <view class="h-30 wrap-tabs bg-color-f7">
      <scroll-view scroll-x="true" :scroll-into-view="'navs'+active" class="h100">
        <view class="flex f-n h100">
          <view @click="changeTab(index)" v-for="(item,index) in navs" :key="index" :id="'navs'+index"
                :class="active == index ? 'navs-on t-color-y' : ''"
                class="flex f-s-0 flex-1 f-j-c  f-a-c h100   f-w-500">{{ item }}
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="padding-15"></view>
    <block v-if="active == 0">
      <view class="padding-lr12" style="padding-top: 1px;" v-if="list.length>0">
        <view @click="go('/pagesA/shops/detail?id='+item.goodsId)"  v-for="(item, index) of list"
              :key="index" class="b-radius-5 bg-color-w flex margin-t10">
<!--          <view class="flex  f-s-0 w-100 h-100 bg-img b-radius-5" :style="item.goodsMainImg | bgimg(300)+''"></view>-->


          <u-image class="flex  f-s-0 w-100 h-100 bg-img b-radius-5"   :src="item.goodsMainImg+'?'+globalImageProcessingSuffix" alt="" >
            <view slot="error" style="font-size: 24rpx;">
              <img class="flex  f-s-0 w-100 h-100 bg-img b-radius-5" :src="'https://img.fscmkjznb.com/static/noImg.jpeg'+'?'+globalImageProcessingSuffix" alt=""/>
            </view>
          </u-image>
          <view class="flex flex-1 f-c f-j-s " style="padding: 10px 0 0px 10px;">
            <view class="flex flex-1 f-c">
              <view class="line2 margin-r10">
                <text class="f12-size t-color-6 line2">{{ item.goodsName }}</text>
              </view>
              <view class="flex  f-w margin-t4">
                <view class="text-price  f-w-b t-color-p">{{ item.price }}</view>
              </view>
            </view>
            <view class="flex f-a-c f-j-s ">
              <text></text>
              <!-- <view class="f11-size t-color-9">{{i18nModel['1人收藏'] | i18n(item.colletionNum)}}</view> -->
              <view class="flex">
                <view @click.stop="del(index)" style="padding: 6px 10px 10px 10px;"
                      class="flex f-a-c  van-icon van-icon-delete-o"></view>
                <view style="padding: 6px 10px 10px 10px;" class="flex f-a-c  van-icon van-icon-shop-o "></view>
              </view>
            </view>
          </view>
        </view>
        <uni-load-more :showIcon="true" :showText="true" :status="loadStatus" v-if="list.length>0"></uni-load-more>

      </view>
      <no-data :list="findList" v-else></no-data>
    </block>
    <block v-if="active == 1">
      <view class="padding-6">
        <find-list ref="findlist" :list="findList" @del="delFind" :offset='1.2' pages="user"
                   v-show="findList.length>0"></find-list>
        <uni-load-more :showIcon="true" :showText="true" :status="loadStatus" v-if="findList.length>0"></uni-load-more>
        <no-data :list="findList" v-else></no-data>
      </view>
    </block>
  </view>
</template>
<style scoped>
@import url('../../static/css/order/order.css');
</style>
<script>
import findList from '../../pages/find/components/findlist.vue';

const API = require('../../utils/api/shops.js').default;
const userAPI = require('../../utils/api/user.js').default;
const $ = require('../../utils/api.js');
let self;
export default {
  data() {
    return {
      globalImageProcessingSuffix:'',
      status: 'more',
      list: [],
      page: 1,
      pageSize: 10,
      totalPage: 0,
      findTotalPage: 1,
      findPage: 1,
      findList: [],
      navs: [],
      active: 0,
      isLoading:false,  //是否加载中
      loadStatus:"more",   //uni-load-more的状态
    };
  },
  onShow() {
    this.globalImageProcessingSuffix = getApp().globalData.globalImageProcessingSuffix;
  },
  onLoad: function () {
    self = this;
    this.init();
    $.setTitle(self.i18nModel['我的收藏'])
  },
  methods: {
    delFind(index) {
      this.page=1
      this.findList.splice(index, 1);
      this.$refs.findlist.refreshNext()
    },
    changeTab(index) {
      this.active = index;
      this.loadStatus="more"
      this.isLoading=false
      this.page=1
      this.findPage=1

      if (index===0){
        this.list=[]
        this.getList()
      }else {
        this.findList=[]
        this.getFindList()
      }


    },
    del(index) {
      $.showModal({
        content: '是否确认删除',
        success() {
          $.ajax({
            url: API.delLikeGoodsApi,
            data: {id: self.list[index]['id']},
            method: 'POST',
            success(res) {
              self.i18nModel['操作成功'];
              self.list.splice(index, 1);
            }
          })
        },
      }, this)
    },
    getList() {
      const self = this;
      $.ajax({
        url: API.likeGoodsListApi,
        data: {
          page: self.page,
          pageSize: self.pageSize
        },
        method: 'GET',
        loading:true,
        success(res) {
          let list = [];
          if (self.page != 1) {
            list = self.list.concat(res.data.list);
          } else {
            list = res.data.list ? res.data.list : [];
          }
          self.totalPage = res.data.totalPage;
          self.list = list;

          self.isLoading=false;
          if (self.page >= self.totalPage){
            self.loadStatus = "noMore";
          }
        }
      })
    },
    getFindList() {
      const self = this;
      $.ajax({
        url: userAPI.likeFindList,
        data: {
          page: self.page,
          pageSize: self.pageSize
        },
        method: 'GET',
        loading:true,
        success(res) {
          let list = res.data.list ? res.data.list : [];
          if (list.length <= 0 && self.findPage == 1) {
            self.findList = [];
            return;
          }
          list.forEach((ele, index) => {
            let obj = {};
            // obj.collectTrends = ele.collectTrends ? ele.collectTrends : true;
            obj.index = index;
            if (obj.videoUrl && obj.videoUrl != '') {
              obj['mainImg'] = obj.videoUrl + "?" +uni.getStorageSync('imageProcessingSuffix');
            } else if (String(obj.images).indexOf('|') >= 0) {
              obj['mainImg'] = obj.images.split('|')[0];
            } else {
              obj['mainImg'] = obj.images;
            }
            self.findList.push(obj);
          })
          self.findTotalPage = res.data.totalPage;
          self.isLoading=false;
          if (self.findPage >= self.findTotalPage){
            self.loadStatus = "noMore";
          }

        }
      })
    },
    init() {
      this.navs = [this.i18nModel['商品'], this.i18nModel['动态']];
      this.getList();
      this.getFindList();
    },
  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  components: {findList},
  computed: {
    i18nModel() {
      return this.$t('likelist')
    },
  },
  onPullDownRefresh() {
  },
  onReachBottom() {
    if (this.page < this.totalPage && this.active === 0) {
      if(!this.isLoading){
        this.isLoading=true;
        this.page+=1;
        this.loadStatus = "loading";
        this.getList();
      }

    }else if (this.findPage < this.findTotalPage && this.active === 1) {
      if(!this.isLoading){
        this.isLoading=true;
        this.findPage+=1;
        this.loadStatus = "loading";
        this.getFindList();
      }

    }
  }
}
</script>
